<template>
	<form class="form" @submit="sub">
		<!-- 微信号 -->
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					微信号
				</view>
				<view class="value">{{ data.formData.wechat.length }}/36</view>
			</view>
			<view class="form-control">
				<input
					class="input"
					type="text"
					maxlength="20"
					v-model="data.formData.wechat"
					name="wechat"
					placeholder="请填写微信号（6-20个字）"
					placeholder-class="placeholderStyle"
				/>
			</view>
		</view>
		<view v-show="data.trialwechat === '2'" class="tips">审核失败！此时您的微信号不对外展示</view>
		<view class="form-submit">
			<button v-if="data.trialwechat === '0'" form-type="submit" disabled class="btn btn-sub btn-dis" hover-class="btnClickStyle">审核中</button>
			<button v-if="data.trialwechat !== '0'" :disabled="isDisabled" :class="isDisabled ? 'btn-dis' : ''" form-type="submit" class="btn btn-sub" hover-class="btnClickStyle">
				提交
			</button>
		</view>
	</form>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { valid } from '@/subpages/common/utils/valid.js';
import { isEmpty } from '@/common/utils/index.js';
import { getWechat, editWechat } from '@/subpages/common/api/set.js';

const data = reactive({
	formData: {
		wechat: ''
	},
	wechat: '',
	trialwechat: null
});
onLoad(options => {
	data.trialwechat = options.trialwechat;
	getWechatRequest();
});
const isDisabled = computed(() => {
	return isEmpty(data.formData.wechat) || data.formData.wechat === data.wechat;
});
//修改微信号表单提交
function sub(e) {
	const subData = e.detail.value;
	let rules = [
		{
			value: subData.wechat,
			null: '请填写6-20位的真实可添加的微信号',
			dataType: '6&20',
			error: '请填写6-20位的真实可添加的微信号'
		}
	];
	const dataTypes = { dataTypes: { '6&20': /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/ }, tip: 1 };
	valid(rules, dataTypes).then(res => {
		editWechatRequest();
	});
}
async function editWechatRequest() {
	const res = await editWechat(data.formData);
	setTimeout(() => {
		uni.navigateBack();
	}, 500);
}
//获取微信号
async function getWechatRequest() {
	const res = await getWechat();
	data.formData = res.data;
	data.wechat = res.data.wechat;
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style lang="scss" scoped>
@import '@/common/css/base.scss';
@import '@/common/css/form.scss';
.tips {
	padding: 28rpx 0rpx;
	color: #ff0000;
	font-size: 24rpx;
}
.form-submit {
	position: relative;
	margin-top: 44rpx;
	background-color: transparent;
	box-shadow: none;
	.btn {
		border-radius: 16rpx;
	}
}
</style>
